<!DOCTYPE html><html><script src="https://blogswidget.googlecode.com/svn/branches/jsnormal.js" language="javascript"></script><head><title>PixelBox</title> <script src="jquery.js"></script> <script  style="display:none">jQuery(document).ready(function($){$('.pixelbox_trigger').click(function(e){e.preventDefault();var image_href=$(this).attr("href");var image_width=$(this).attr("width");var image_height=$(this).attr("height");if($('#pixelbox').length>0){$('#content').html('<img src="'+image_href+'"  width="'+image_width+'"  height="'+image_height+'" />');$('#pixelbox').fadeIn(300);}
else{var pixelbox='<div id="pixelbox">'+
'<img src="Images/close.png" id="close"/>'+
'<div id="content">'+
'<img src="'+image_href+'"  width="'+image_width+'"  height="'+image_height+'" />'+
'</div>'+
'</div>';$('body').append(pixelbox);}});$('#close').live('click',function(){$('#pixelbox').fadeOut(300);});});</script> <style media="screen" type="text/css" style="display:none">
		#pixelbox {
			position:fixed; /* keeps the pixelbox window in the current viewport */
			top:0; 
			left:0; 
			width:100%;
			height:100%;
			background:url(http://hardeepasrani.googlecode.com/svn/PixelBox/Images/overlay.png) repeat; 
                        text-align:right;
                        z-index:1000;
		}

		#close {
                        padding:2px;
                        background:#fff;
                        cursor: pointer;
		}

		#content img {
			box-shadow:0 0 25px #111;
			-webkit-box-shadow:0 0 25px #111;
			-moz-box-shadow:0 0 25px #111;
		}

                #content {
			text-align:center;
		}
</style>
<style>
                body{
			background:whitesmoke;
		}
		#wrapper {
			width:600px; 
			margin:0 auto; 
			border-radius:0 0 5px 5px;
			-moz-border-radius:0 0 5px 5px;
			-webkit-border-radius: 0 0 5px 5px;
			background:#fff; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
			text-align:left;
		}
		#wrapper blockquote {
			width:500px; 
                        background-color: whitesmoke;
			margin:0 auto; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
}

		#footer {
			width:600px; 
			margin:0 auto; 
			border-radius:0 0 5px 5px;
			-moz-border-radius:0 0 5px 5px;
			-webkit-border-radius: 0 0 5px 5px;
			background:#fff; 
			border:1px solid #ccc; 
			padding:25px; 
			border-top:none; 
			box-shadow:0 0 5px #ccc;
			-moz-box-shadow:0 0 5px #ccc;
			-webkit-box-shadow:0 0 5px #ccc;
			text-align:center;
		}
</style> </head><body><div id="wrapper"><h1>PixelBox - Version 1.0</h1><iframe src="https://www.facebook.com/plugins/like.php?href=https://facebook.com/BloggingPower" scrolling="no" frameborder="0" style="border:none; width:470px; height:60px"></iframe></div><div id="wrapper"><h2><b>Demo :</b></h2><ul style="list-style:none;margin:0;"><li style="float: left;"><a href="Content/1.jpg" height="90%" class="pixelbox_trigger"><img src="http://1.1.1.2/bmi/hardeepasrani.googlecode.com/svn/PixelBox/Content/1.jpg" border="1px" width="100px" height="100px"/> </a></li><li style="float: left;"><a href="Content/2.jpg" class="pixelbox_trigger"><img src="http://1.1.1.3/bmi/hardeepasrani.googlecode.com/svn/PixelBox/Content/2.jpg" border="1px" width="100px" height="100px"/> </a></li><li style="float: left;"><a href="Content/3.jpg" class="pixelbox_trigger"><img src="http://1.1.1.4/bmi/hardeepasrani.googlecode.com/svn/PixelBox/Content/3.jpg" border="1px" width="100px" height="100px"/> </a></li><li style="float: left;"><a href="Content/4.jpg" height="90%" class="pixelbox_trigger"><img src="http://1.1.1.5/bmi/hardeepasrani.googlecode.com/svn/PixelBox/Content/4.jpg" border="1px" width="100px" height="100px"/> </a></li><li><a href="Content/5.jpg" height="90%" class="pixelbox_trigger"><img src="http://1.1.1.1/bmi/hardeepasrani.googlecode.com/svn/PixelBox/Content/5.jpg" border="1px" width="100px" height="100px"/> </a></li></ul><hr/><h2><b>Installing :</b></h2>Add JS and CSS files in your document :<br/><br/><blockquote>&lt;script src="jquery.js" type="text/javascript" &gt; &lt;/script&gt; <br/> &lt;script src="PixelBox.js" type="text/javascript" &gt; &lt;/script&gt; <br/> &lt;link rel="stylesheet" href="PixelBox.css" type="text/css" media="screen" /&gt;</blockquote><hr/><h2><b>Adding :</b></h2>Add <b>class="pixelbox_trigger"</b> in your document like this :<br/><br/><blockquote>&lt;a href="ImageURL" <b>class="pixelbox_trigger" </b>&gt; &lt;img src="ImageURL" width="100px" height="100px"/&gt; &lt;/a&gt;</blockquote><br/>Just after class you can also add width="" height ="" tag to set width and height of your pop-up.</div><!--//--><footer id="footer"><h3>Created By - <a style="color:black;text-decoration:none;" onclick="target='_blank';" href="http://twitter.com/HardeepAsrani">Hardeep Asrani </a>| &#0169;2012 All Right Reserved.</h3></footer> </body></html><script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img",1);//-->
</script>